<template>
    <div class="border border-neutral-medium/30 rounded-lg overflow-hidden">
        <button class="w-full flex items-center justify-between p-3 text-left hover:bg-neutral-light/50 transition-bg"
            @click="toggle">
            <span class="text-sm font-medium">
                <slot name="header"></slot>
            </span>
            <i class="fa" :class="isOpen ? 'fa-angle-up text-primary' : 'fa-angle-down text-neutral'"></i>
        </button>
        <div class="p-3 border-t border-neutral-medium/30 bg-neutral-light/30" v-show="isOpen">
            <slot name="content"></slot>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const isOpen = ref(false)

const toggle = () => {
    isOpen.value = !isOpen.value
}
</script>
